<template>
<div class="time1">
    <h2>计时器</h2>
    <p>计时: {{ formatH }}时 {{ formatM }}分 {{ formatS }}秒</p>
    <button @click="startTimer">开始计时</button>&nbsp;
    <button @click="endTimer">停止计时</button>
</div>
</template>

<script setup>
import { ref, watch, computed} from 'vue'

const h = ref(0)
const m = ref(0)
const s = ref(0)
const start = ref(null)

//下面定义了开始计时的函数
const startTimer = () => {
    //setInterval自带的一个计时方法,它会隔一段时间运行一次
    start.value = setInterval(() => {
        s.value ++
    },1000) //隔1000毫秒运行一次秒加1
}

const endTimer = () => {
    clearInterval(start.value)
}

//侦听 秒 的变化
watch(s, (newSeconds) => {
    if (newSeconds >= 60){
        s.value = 0
        m.value ++
    }
})

//侦听 分 的变化
watch(m, (newMinutes) => {
    if (newMinutes >= 60){
        m.value = 0
        h.value ++
    }
})

//使用计算属性computed()把秒格式化
const formatS = computed(() => {
    if(s.value < 10){
        return '0' + s.value
    }
    else {
        return s.value
    }
})

const formatM = computed(() => {
    if(m.value < 10){
        return '0' + m.value
    }
    else {
        return m.value
    }
})

const formatH = computed(() => {
    if(h.value < 10){
        return '0' + h.value
    }
    else {
        return h.value
    }
})

</script>

<style scoped>
.time1{
    background-color: rgb(192, 192, 192);
    border-radius: 15px;
    padding:10px;
    margin:10px;
}
</style>